
// 1、请实现以下场景
// ● 假设有一个订单详情组件，需要根据外面传入的 orderId 来加载并显示具体的订单信息，该如何实现？注意，外面传入的 orderId 会变更，需要响应 orderId 的变更来更新订单信息的数据
// TODO: 使用类组件或函数组件开发一个订单详情组件
// 1. 该组件有一个属性 orderId，能根据 orderId 的变化更新内容
// 2. 添加一个按钮能够刷新当前详情状态

// 可以用的现有的辅助工具：
import { fetchOrderDetail } from '@/api';
// 用法：
//   fetchOrderDetail(orderId).then((orderData) => { /* orderData 订单详情数据 */ })

import { OrderDescriptions } from '@/components';
// 用法：
//   <OrderDescriptions orderData={orderData} /> // 渲染出一个订单描述信息的列表

// 以下是你的回答 在这里完成订单详情组件, 如果不会hooks，也可以写class
import * as React from 'react';

export function OrderDetail(props) {
  const [orderData, setOrderData] = useState(null);
  /* ------------ 答案区间开始--------------------- */
  // ...
  const refresh = React.useCallback(() => {
    // ...
    fetchOrderDetail(props.orderId).then((orderData) => { setOrderData([...orderData]) /* orderData 订单详情数据 */ })
  })
  /* ------------ 答案区间结束--------------------- */

  return (
    <>
      <OrderDescriptions orderData={orderData} />
      {/* 下面的onClick1 更正为 onClick */}
      <button onClick1={refresh}>刷新</button>
      </>
  )
}